<template>
  <div>
    <div class="container-xl bg-white p-0" v-show="show">
      <ul class="nav nav-tabs mt-3">
        <li class="nav-item">
          <router-link :to="{ name: '我的题单' }" active-class="active" class="nav-link">我的题单</router-link>
        </li>
        <li class="nav-item">
          <router-link :to="{ name: '我的题库' }" active-class="active" class="nav-link">我的题目</router-link>
        </li>
      </ul>
    </div>
    <router-view v-bind="{ user }"></router-view>
  </div>
</template>


<script setup lang="ts">
import { Storekey } from "../../../interface";
import Studycodemodel from "../../../mysql_interface/studycodemodel";
import { computed, onMounted, ref, watch } from "vue";
import {
  useRoute,
  useRouter,
} from "vue-router";
import { useStore } from "vuex";
const store = useStore(Storekey);
const user = computed<Studycodemodel.Iuser>(() => {
  return store.getters.getuser;
});
const router = useRouter();

const route = useRoute();
const show = ref(true);
watch(
  () => user.value,
  (e) => {
    if (!e) router.push("/");
  }
);

watch(
  () => route.name,
  (name) => {
    if (name === "加入团队") {
      show.value = false;
    } else {
      show.value = true;
    }
  }
);


onMounted(() => {
  if (!user.value) router.push("/");
});

</script>

<style scoped>
.nav-link {
  color: var(--color-43);
}
</style>
